
.recommendation-container {
  display: flex; /* 使用 Flexbox 布局 */
  padding: 20px;
  position: relative; /* 确保相对定位的父容器 */
}

.recommendation-title {
  margin-top: 20px;
  margin-bottom: 20px;
  position: absolute; /* 使用绝对定位 */
  top: 0; /* 位于容器顶部 */
}

.column-container {
  width: 100%;
  height: 100%;
  display: flex; /* 使用 Flexbox 布局 */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between; /* 保持两边间距相等 */
}

.service-card-container {
  flex-grow: 1; /* 允许增长以填满空间 */
  justify-content: space-between;
  gap: 20px;
}

@media (min-width: 768px) {
  .service-card-container {
    justify-content: center; /* 在小屏幕上水平居中 */
  }
}

.left-column, .right-column {
  padding: 20px;
}

.left-column {
  width: calc(30% - 20px); /* 固定宽度并减去padding */
  flex-shrink: 0; /* 不要缩小 */
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 子元素垂直排列 */
  padding: 20px;
  overflow-y: auto; /* 当内容溢出时显示垂直滚动条 */
  max-height: 600px; /* 设置最大高度以触发滚动条 */
}

.right-column {
  width: calc(70% - 20px); /* 固定宽度并减去padding */
  flex-shrink: 0; /* 不要缩小 */
  padding-left: 20px;
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 子元素垂直排列 */
  min-height: 600px;
}
.service-card-container .service-card {
  margin-bottom: 20px; /* 为每张卡片的底部添加20px的外边距 */
  /* 其他样式保持不变 */
}